<template>
  <div>
    <a-row class="indicator">
      <a-col :xs="6" :sm="6" :md="6" :lg="6" style="padding-right: 5px">
        <a-select v-model="indicators[index].event" @change="changeEvent">
          <a-select-opt-group label="默认事件">
            <a-select-option
              v-if="item.type === 0"
              v-for="item in events"
              :value="item.name"
              :key="item.name"
            >{{ item.displayName }}</a-select-option>
          </a-select-opt-group>
          <a-select-opt-group label="自定义事件">
            <a-select-option
              v-if="item.type === 1"
              v-for="item in events"
              :value="item.name"
              :key="item.name"
            >{{ item.displayName }}</a-select-option>
          </a-select-opt-group>
        </a-select>
      </a-col>
      <a-col :xs="9" :sm="9" :md="9" :lg="9" style="padding-right: 5px">
        <a-button @click="addRule">添加筛选</a-button>
      </a-col>
    </a-row>
    <MultiLevelFilter ref="filter" v-bind:properties="properties" v-model="indicators[index].filter" v-bind:datasourceId="datasourceId" v-on:remove="demote"></MultiLevelFilter>
  </div>
</template>

<script>
import IndicatorFilterGroup from "@/views/components/IndicatorFilterGroup.vue";
import MultiLevelFilter from "@/views/components/Filter/MultiLevelFilter.vue"; // 引入新版级联筛选组件

export default {
  name: "Indicator",
  components: {MultiLevelFilter, IndicatorFilterGroup },
  props: {
    events: Array,
    index: Number,
    properties: Array,
    indicators: Array,
    measures: Array,
    datasourceId: Number
  },
  data: function() {
    return {
      tree_show: false,
      measureNames: []
    };
  },
  computed: {
    eventMeasures: function() {
      let eventMeasures = [];
      for (let i = 0; i < this.measures.length; i++) {
        if (
          this.measures[i].event === this.indicators[this.index].event ||
          this.measures[i].event === ""
        ) {
          eventMeasures.push({
            name: this.measures[i].name,
            displayName: this.measures[i].displayName
          });
        }
      }
      return eventMeasures;
    },
  },
  methods: {
      //条件组降级：如果条件组只剩一个条件，那么移除当前条件组，将剩下的这个条件合并到上级条件组中。
      demote: function (index) {
          let originalFilter = this.indicators[this.index].filter;
          let filterIndex = originalFilter.filters.findIndex((item) => {
              return item.index === index;
          });
          if(filterIndex !== -1) {
              let filter = originalFilter.filters[filterIndex];
              originalFilter.filters.splice(filterIndex, 1);
              originalFilter.condition = filter.condition;
              filter.rules.forEach((item, index) => {
                  originalFilter.rules.push(item);
              });
              filter.filters.forEach((item, index) => {
                  originalFilter.filters.push(item);
              });
          }
      },
    addRule() {
      this.$refs.filter.addRule();
    },
    show_tree() {
      this.indicators[this.index].filter = {
        key: Math.random()
          .toString(36)
          .substr(2),
        Hierarchy: 0, // 逻辑层级
        property: "", // 事件属性名称
        operator: "", // 操作符
        value: "", // 事件属性值
        values: [] // 事件属性值数组
      };
      this.tree_show = true;
    },
    change_all(b, obj) {
      if (b) {
        // 组件消失
        this.indicators[this.index].filter = null;
        this.tree_show = false;
      } else {
        // 组件数据更改
        this.indicators[this.index].filter = obj;
      }
    },
    isLast: function() {
      return this.indicators.length === this.index + 1;
    },
    addFilterItem: function() {
      this.$refs.filterGroup.addItem();
    },
    removeItem: function() {
      this.indicators.splice(this.index, 1);
    },
    changeEvent: function(selectedValue) {
      this.measureNames.splice(0, this.measureNames.length);
    },
    changeMeasure: function(selectedValue) {
      this.indicators[this.index].measure.splice(
        0,
        this.indicators[this.index].measure.length
      );
      for (let i = 0; i < this.measures.length; i++) {
        if (this.measureNames.includes(this.measures[i].name)) {
          // console.log(this.indicators[this.index].measure);
          this.indicators[this.index].measure.push({
            name: this.measures[i].name,
            value: this.measures[i].value
          });
        }
      }
    },
    initMeasure: function() {
      this.measureNames.splice(0, this.measureNames.length);
      for (let i = 0; i < this.indicators[this.index].measure.length; i++) {
        this.measureNames.push(this.indicators[this.index].measure[i].name);
      }
    }
  },
  watch: {
    indicators: function() {
      this.initMeasure();
    }
  },
  mounted: function() {
    this.initMeasure();
    if (this.indicators[this.index].event === "" && this.events.length > 0) {
      this.indicators[this.index].event = this.events[0].name;
    }
    // 对树形组件的数据进行标准化处理
    let obj = this.indicators[this.index].filter;
    if (obj.condition && obj.rules.length > 1) {
      this.tree_show = true;
    }
    // 对树形组件进行展示，并且更改数据格式
    if (obj.condition && obj.rules.length == 1) {
      this.indicators[this.index].filter = {
        key: obj.rules[0].key,
        Hierarchy: 1, // 逻辑层级
        property: obj.rules[0].property, // 事件属性名称
        operator: obj.rules[0].operator, // 操作符
        value: obj.rules[0].value, // 事件属性值
        values: obj.rules[0].values // 事件属性值数组
      };
      this.tree_show = true;
    }
    // 树形组件为空筛选条件
    if (obj.condition && obj.rules.length == 0) {
      this.tree_show = false;
    }
    // 当前树形组件筛选条件为单条
    if (obj && !obj.condition) {
      this.indicators[this.index].filter = {
        key: obj.key,
        Hierarchy: obj.Hierarchy, // 逻辑层级
        property: obj.property, // 事件属性名称
        operator: obj.operator, // 操作符
        value: obj.value, // 事件属性值
        values: obj.values // 事件属性值数组
      };
      this.tree_show = true;
    }
  }
};
</script>

<style scoped>
.indicator {
  padding-bottom: 10px;
}
</style>